<template>
  <div>
    <el-row>
      <el-col :span="24" class="main-h-center">
        <el-card style="width:700px;margin-top:20px;" shadow="never">
          <el-form label-position="right" label-width="50px" style="padding-top: 30px;">
            <!--  -->
            <el-form-item label="卖家">
              <el-input v-model="postData.seller" placeholder="卖家账号"></el-input>
            </el-form-item>
            <!--  -->
            <el-form-item label="标题">
              <el-input v-model="postData.title" placeholder="商品主标题"></el-input>
            </el-form-item>
            <!--  -->
            <el-form-item label="详情">
              <el-input v-model="postData.subtitle" placeholder="商品详情内容" type="textarea" :rows="3"></el-input>
            </el-form-item>
            <!--  -->
            <el-form-item label="价格">
              <el-col :span="6">
                <el-form-item label>
                  <el-input v-model="postData.price" placeholder="商品价格" type="number"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="库存" style="margin-left:20px;">
                  <el-input v-model="postData.quantity" placeholder="库存数量" type="number"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="过期" style="margin-left:20px;">
                  <el-input v-model="postData.end_time" placeholder="单位（天）" type="number"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <!--  -->
            <el-form-item label="游戏">
              <el-col :span="6">
                <el-form-item>
                  <el-select placeholder="选择游戏" v-model="postData.belongs">
                    <el-option v-for="item of games" :label="item.name" :value="item.code"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="类型" style="margin-left:20px;">
                  <el-select placeholder="选择商品类型" v-model="postData.goods_type">
                    <el-option v-for="item of goodsType" :label="item.key" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="保障" style="margin-left:20px;">
                  <el-select placeholder="选择保障类型" v-model="postData.safe_type">
                    <el-option label="官方保障" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <!--  -->
            <el-form-item label="图片">
              <el-upload
                list-type="picture-card"
                :limit="5"
                :action="$baseUrl+'/upload/image'"
                :headers="headers"
                :on-preview="handleUploadPreview"
                :on-remove="handleUploadRemove"
                :on-error="handleUploadError"
                :on-success="handleUploadSuccess"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <el-form-item style="margin-bottom: 0;">
              <el-col :span="16">
                <span style="color:#F56C6C">提示：图片最多只能添加五张，第一张会被设置成主图。</span>
              </el-col>
              <el-col :span="8">
                <el-button id="btn" type="primary" @click="handleAdd" style="float:right">立即添加</el-button>
              </el-col>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
import Clipboard from "clipboard";
import { log } from 'util';
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      headers : {
        Authorization: "Bearer " + localStorage.getItem("higame-token")
      },
      games: [],
      goodsType: [],
      postData: {
        seller: "",
        title: "",
        subtitle: "",
        price: "",
        quantity: "",
        end_time: "",
        belongs: "",
        goods_type: "",
        safe_type: "",
        main_image: "",
        detail_image: ""
      }
    };
  },
  methods: {
    handleAdd() {
      this.$http
        .post("/trade/create", this.postData)
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success"
            });
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    handleUploadPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleUploadRemove(file, fileList) {
      if (fileList.length > 0) {
        this.postData.main_image = fileList[0].response.data;
        let images = [];
        for (let i = 1; i < fileList.length; i++) {
          images.push(fileList[i].response.data);
        }
        this.postData.detail_image = images.join(",");
      }
    },
    handleUploadError(err, file, fileList) {
      this.$message.error(err.toString());
    },
    handleUploadSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.$message({
          message: "上传成功！",
          type: "success"
        });
        if (fileList.length > 0) {
          this.postData.main_image = fileList[0].response.data;
          let images = [];
          for (let i = 1; i < fileList.length; i++) {
            images.push(fileList[i].response.data);
          }
          this.postData.detail_image = images.join(",");
        }
      } else {
        this.$message.error(res.msg);
      }
    }
  },

  created() {
    this.$http
      .post("/game/list", this.postData)
      .then(res => {
        if (res.code == 200) {
          this.games = res.data.list;
        } else {
          this.$message.error(res.msg);
        }
      })
      .catch(err => {
        this.$message.error(err.msg);
      });
    this.$http
      .post("/trade/goodstype", {})
      .then(res => {
        if (res.code == 200) {
          this.goodsType = res.data;
        } else {
          this.$message.error(res.msg);
        }
      })
      .catch(err => {
        this.$message.error(err.msg);
      });
  }
};
</script>
<style>
</style>

